<template>
  <div class="rules-container">
    <div class="page-header">
      <h1>各补贴规则公示</h1>
      <p class="update-info">
        <i class="el-icon-info"></i>
        最新更新时间：2025年10月
      </p>
    </div>

    <div class="rules-cards">
      <!-- 家庭补助 -->
      <div class="rule-card">
        <div class="rule-header">
          <div class="rule-icon">
            <i class="el-icon-home"></i>
          </div>
          <h2>家庭补助</h2>
        </div>
        <div class="rule-content">
          <div class="amount-box">
            <span class="label">补助金额：</span>
            <span class="amount">3000元/户·年</span>
          </div>
          <p class="description">
            针对符合条件的困难家庭提供的基本生活补助，每年发放一次，需每年进行资格审核。
          </p>
        </div>
      </div>

      <!-- 育儿补贴 -->
      <div class="rule-card">
        <div class="rule-header">
          <div class="rule-icon">
            <i class="el-icon-baby-carriage"></i>
          </div>
          <h2>育儿补贴</h2>
        </div>
        <div class="rule-content">
          <div class="amount-box formula">
            <span class="label">补助金额：</span>
            <span class="formula-text">婴儿数量 × 4000元/人·年</span>
          </div>
          <p class="description">
            针对0-3岁婴幼儿家庭的育儿支持补贴，按实际抚养的婴儿数量计算，每季度发放一次。
          </p>
        </div>
      </div>

      <!-- 耕地补贴 -->
      <div class="rule-card">
        <div class="rule-header">
          <div class="rule-icon">
            <i class="el-icon-crop"></i>
          </div>
          <h2>耕地补贴</h2>
        </div>
        <div class="rule-content">
          <div class="subsidy-types">
            <div class="subsidy-item">
              <span class="type-name">菜园补助：</span>
              <span class="type-formula">面积 × 5000元/亩·年</span>
            </div>
            <div class="subsidy-item">
              <span class="type-name">园地补助：</span>
              <span class="type-formula">面积 × 1000元/亩·年</span>
            </div>
            <div class="subsidy-item">
              <span class="type-name">林地补助：</span>
              <span class="type-formula">面积 × 2000元/亩·年</span>
            </div>
            <div class="subsidy-item">
              <span class="type-name">水田补助：</span>
              <span class="type-formula">面积 × 3000元/亩·年</span>
            </div>
            <div class="subsidy-item">
              <span class="type-name">丘陵补助：</span>
              <span class="type-formula">面积 × 4000元/亩·年</span>
            </div>
          </div>
          <p class="description">
            依据土地类型和实际耕种面积计算的农业补贴，每年春季统一核算发放。
          </p>
        </div>
      </div>

      <!-- 学生贷款 -->
      <div class="rule-card">
        <div class="rule-header">
          <div class="rule-icon">
            <i class="el-icon-graduation-cap"></i>
          </div>
          <h2>学生贷款</h2>
        </div>
        <div class="rule-content">
          <div class="loan-info">
            <p>• 全日制本科及以下学历：最高12000元/年</p>
            <p>• 全日制研究生学历：最高16000元/年</p>
            <p>• 贷款利率：按国家同期基准利率执行，在校期间利息由财政补贴</p>
          </div>
          <p class="description">
            针对家庭经济困难学生提供的教育贷款，毕业之后开始偿还本金，有最长20年的还款期限。
          </p>
        </div>
      </div>
    </div>

    <div class="notes-section">
      <h3><i class="el-icon-warning-outline"></i> 注意事项</h3>
      <ul>
        <li>所有补贴需满足相应申请条件并提供证明材料</li>
        <li>补贴金额可能根据政策调整，以当年最新通知为准</li>
        <li>如有疑问可拨打咨询热线：400-123-4567</li>
        <li>申请时间：每年3月1日-5月31日，逾期将不予受理</li>
      </ul>
    </div>
  </div>
</template>

<style>
    .rules-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 30px 20px;
        background-color: #f9fafb;
        min-height: 100vh;
    }

    .page-header {
        text-align: center;
        margin-bottom: 40px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .page-header h1 {
        font-size: 28px;
        color: #1d2129;
        margin-bottom: 10px;
        font-weight: 600;
     }

    .page-header .update-info {
        color: #86909c;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-header .update-info .el-icon-info {
        margin-right: 6px;
        font-size: 16px;
    }

     .rules-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        margin-bottom: 40px;
    }

    .rule-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .rule-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .rule-card .rule-header {
        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
        color: #fff;
        padding: 20px 25px;
        display: flex;
        align-items: center;
    }

    .rule-card .rule-header .rule-icon {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
    }

    .rule-card .rule-header .rule-icon .el-icon {
        font-size: 20px;
    }

    .rule-card .rule-header h2 {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
    }

    .rule-card .rule-content {
        padding: 25px;
    }

    .rule-card .rule-content .amount-box {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #eee;
    }

    .rule-card .rule-content .amount-box .label {
        color: #666;
        font-size: 15px;
    }

    .rule-card .rule-content .amount-box .amount {
        color: #f56c6c;
        font-size: 18px;
        font-weight: 600;
        margin-left: 8px;
    }

    .rule-card .rule-content .amount-box.formula .formula-text {
        color: #409eff;
        font-size: 16px;
        font-weight: 500;
        margin-left: 8px;
    }

    .rule-card .rule-content .subsidy-types {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #eee;
    }

    .rule-card .rule-content .subsidy-types .subsidy-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        font-size: 15px;
    }

    .rule-card .rule-content .subsidy-types .subsidy-item .type-name {
        color: #666;
    }

    .rule-card .rule-content .subsidy-types .subsidy-item .type-formula {
        color: #409eff;
        font-weight: 500;
    }

    .rule-card .rule-content .loan-info {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #eee;
    }

    .rule-card .rule-content .loan-info p {
        margin: 10px 0;
        color: #555;
        font-size: 15px;
        line-height: 1.5;
    }

     .rule-card .rule-content .description {
        color: #86909c;
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
    }

    .notes-section {
        background: #fff;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

     .notes-section h3 {
        color: #f56c6c;
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
     }

    .notes-section h3 .el-icon-warning-outline {
        margin-right: 8px;
    }

    .notes-section ul {
        padding-left: 20px;
        margin: 0;
    }

     .notes-section ul li {
        color: #666;
        font-size: 14px;
        margin-bottom: 10px;
        line-height: 1.6;
    }

     .notes-section ul li:last-child {
        margin-bottom: 0;
     }

    @media (max-width: 768px) {
         .rules-cards {
            grid-template-columns: 1fr;
        }
        .page-header h1 {
            font-size: 24px;
        }
        .rule-card .rule-content {
            padding: 20px;
        }
    }
</style>